<!-- 无接口待开发 -->
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useBooleanStore } from '@/store';
import { Notification } from '@arco-design/web-vue';
import { saveByCar } from '@/api/les';
import { getName, getUserJob } from '@/utils/auth';

const form = ref({
  msCarId: '',
  carCode: '',
  carUser: '',
  // carSeat: '',
  rfId: '',
  remark: '',
  carStatus: '',
  lastUpdatedBy: '',
});
const showDrawer = ref<boolean>(false);
const booleanStore = useBooleanStore();

// 监听弹框
watch(
  () => booleanStore.boolValue2,
  (newValue: boolean) => {
    if (booleanStore.num2 === 10) showDrawer.value = newValue;
  }
);
watch(
  () => booleanStore.row,
  () => {
    if (booleanStore.num2 === 10) {
      form.value = {
        msCarId: booleanStore.row.msCarId,
        carCode: booleanStore.row.carCode,
        carUser: booleanStore.row.carUser,
        // carSeat: booleanStore.row.carSeat,
        rfId: booleanStore.row.rfId,
        remark: booleanStore.row.remark,
        carStatus: booleanStore.row.carStatus === '正常' ? '0' : '1',
        lastUpdatedBy: getName() as string,
      };
    }
  }
);

function afterVisibleChange(val: any) {
  if (!val) {
    booleanStore.toggleBool2(10);
  }
}
function handleCancel() {
  // form.value.carSeat = '';
  booleanStore.toggleBool2(10);
}

// 规则校验
const formRef = ref<any>('');

const rules = {
  carCode: [
    { required: true, message: '不能为空' },
    {
      validator: (value: any, cb: any) => {
        if (value && value.length > 30) {
          cb('不能超过30位字符');
        } else {
          cb();
        }
      },
    },
  ],
  carUser: [
    { required: true, message: '不能为空' },
    {
      validator: (value: any, cb: any) => {
        if (value && value.length > 30) {
          cb('不能超过30位字符');
        } else {
          cb();
        }
      },
    },
  ],
  // carSeat: [
  //   { required: true, message: '不能为空' },
  //   {
  //     validator: (value: any, cb: any) => {
  //       if (value && value.length > 30) {
  //         cb('不能超过30位字符');
  //       } else {
  //         cb();
  //       }
  //     },
  //   },
  // ],
  rfId: [
    { required: true, message: '不能为空' },
    {
      validator: (value: any, cb: any) => {
        if (value && value.length > 30) {
          cb('不能超过30位字符');
        } else {
          cb();
        }
      },
    },
  ],
};

async function handleOk(done: any) {
  const res = await formRef.value.validate();
  if (res) {
    done(false);
  } else {
    form.value.lastUpdatedBy = getName() as string;
    const data = await saveByCar(form.value);

    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });

      booleanStore.toggleBool2(10);
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool2(10);
    }
    booleanStore.watchUpdate(17);
    done();
  }
}
</script>

<template>
  <a-drawer
    :width="500"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 修改小车 </template>
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :style="{ width: '450px' }"
      >
        <a-form-item field="carCode" label="小车编号:">
          <a-input v-model="form.carCode" disabled placeholder="小车编号" />
        </a-form-item>
        <a-form-item field="carUser" label="使用人:">
          <a-input v-model="form.carUser" placeholder="小车使用人" />
        </a-form-item>
        <!-- <a-form-item field="carSeat" label="站点地址:">
          <a-input v-model="form.carSeat" placeholder="站点地址" />
        </a-form-item> -->
        <a-form-item field="rfId" label="RFID:">
          <a-input
            v-model="form.rfId"
            max-length="20"
            placeholder="请输入RFID"
          />
        </a-form-item>
        <a-form-item field="remark" label="备注:">
          <a-input v-model="form.remark" placeholder="备注" />
        </a-form-item>
        <!-- <a-form-item field="carStatus" label="小车状态:">
          <a-select v-model="form.carStatus" placeholder="小车状态">
            <a-option value="0">正常</a-option>
            <a-option value="1">故障</a-option>
          </a-select>
        </a-form-item> -->
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
.add {
  background-color: #bacf65;
  color: #fff;
}
.clear {
  margin-left: 10px;
}
</style>
